<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge" >
  <title>前端.林姐姐</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="前端开发工程师，专注XHTML、HTML5、CSS3、javascript、nodeJS、Jquery、zepto、angularJS、requireJS、EJS、LESS和SASS、web标准化、web前端工程化、前端架构、UED和UX用户体验">
<meta property="og:type" content="website">
<meta property="og:title" content="前端.林姐姐">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="前端.林姐姐">
<meta property="og:description" content="前端开发工程师，专注XHTML、HTML5、CSS3、javascript、nodeJS、Jquery、zepto、angularJS、requireJS、EJS、LESS和SASS、web标准化、web前端工程化、前端架构、UED和UX用户体验">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端.林姐姐">
<meta name="twitter:description" content="前端开发工程师，专注XHTML、HTML5、CSS3、javascript、nodeJS、Jquery、zepto、angularJS、requireJS、EJS、LESS和SASS、web标准化、web前端工程化、前端架构、UED和UX用户体验">
  
    <link rel="alternative" href="/atom.xml" title="前端.林姐姐" type="application/atom+xml">
  
  
    <link rel="icon" href="img/linjie.jpg">
  
  <link rel="stylesheet" href="/css/style.css" type="text/css">
</head>

<body>
  <div id="container">
    <div class="left-col">
    <div class="overlay"></div>
<div class="intrude-less">
	<header id="header" class="inner">
		<a href="/" class="profilepic">
			
			<img lazy-src="undefined" class="js-avatar">
			
		</a>

		<hgroup>
		  <h1 class="header-author"><a href="/">林姐姐</a></h1>
		</hgroup>

		
		<p class="header-subtitle">让未来的你的感谢现在的自己！</p>
		

		
			<div class="switch-btn">
				<div class="icon">
					<div class="icon-ctn">
						<div class="icon-wrap icon-house" data-idx="0">
							<div class="birdhouse"></div>
							<div class="birdhouse_holes"></div>
						</div>
						<div class="icon-wrap icon-ribbon hide" data-idx="1">
							<div class="ribbon"></div>
						</div>
						
						<div class="icon-wrap icon-link hide" data-idx="2">
							<div class="loopback_l"></div>
							<div class="loopback_r"></div>
						</div>
						
						
						<div class="icon-wrap icon-me hide" data-idx="3">
							<div class="user"></div>
							<div class="shoulder"></div>
						</div>
						
					</div>
					
				</div>
				<div class="tips-box hide">
					<div class="tips-arrow"></div>
					<ul class="tips-inner">
						<li>菜单</li>
						<li>標籤</li>
						
						<li>友情链接</li>
						
						
						<li>關於</li>
						
					</ul>
				</div>
			</div>
		

		<div class="switch-area">
			<div class="switch-wrap">
				<section class="switch-part switch-part1">
					<nav class="header-menu">
						<ul>
						
							<li><a href="/">主页</a></li>
				        
							<li><a href="/archives">所有文章</a></li>
				        
							<li><a href="/categories/学习笔记/">学习笔记</a></li>
				        
							<li><a href="/categories/技术摘录/">技术摘录</a></li>
				        
						</ul>
					</nav>
					<nav class="header-nav">
						<div class="social">
							
								<a class="github" target="_blank" href="https://github.com/linjieFE" title="github">github</a>
					        
								<a class="mail" target="_blank" href="mailto:solocode@163.com" title="mail">mail</a>
					        
						</div>
					</nav>
				</section>
				
				
				<section class="switch-part switch-part2">
					<div class="widget tagcloud" id="js-tagcloud">
						<a href="/tags/gulp/" style="font-size: 10px;">gulp</a> <a href="/tags/hexo/" style="font-size: 10px;">hexo</a> <a href="/tags/javascript/" style="font-size: 10px;">javascript</a> <a href="/tags/mac技巧/" style="font-size: 13.33px;">mac技巧</a> <a href="/tags/react/" style="font-size: 10px;">react</a> <a href="/tags/react-native/" style="font-size: 10px;">react-native</a> <a href="/tags/vim/" style="font-size: 10px;">vim</a> <a href="/tags/前题面试题/" style="font-size: 10px;">前题面试题</a> <a href="/tags/学习笔记/" style="font-size: 20px;">学习笔记</a> <a href="/tags/终端/" style="font-size: 10px;">终端</a> <a href="/tags/随笔/" style="font-size: 16.67px;">随笔</a>
					</div>
				</section>
				
				
				
				<section class="switch-part switch-part3">
					<div id="js-friends">
					
			          <a target="_blank" class="main-nav-link switch-friends-link" href="http://www.ruanyifeng.com/home.html">阮一峰ES6</a>
			        
			          <a target="_blank" class="main-nav-link switch-friends-link" href="http://nodeapi.ucdok.com/api/">NodeJS在线文档</a>
			        
			          <a target="_blank" class="main-nav-link switch-friends-link" href="http://jquery.cuishifeng.cn">jquery在线文档</a>
			        
			          <a target="_blank" class="main-nav-link switch-friends-link" href="http://www.w3school.com.cn/js/">javascript手册</a>
			        
			          <a target="_blank" class="main-nav-link switch-friends-link" href="http://www.phpstudy.net/css3/">css3在线手册</a>
			        
			          <a target="_blank" class="main-nav-link switch-friends-link" href="http://blog.css6.com">凯哥的博客</a>
			        
			        </div>
				</section>
				

				
				
				<section class="switch-part switch-part4">
				
					<div id="js-aboutme">80s，来自祖国最东端乌苏里江畔。爱好运动和音乐，希望在这里可以跟一样爱好前端的朋友共同进步！</div>
				</section>
				
			</div>
		</div>
	</header>				
</div>

    </div>
    <div class="mid-col">
      <nav id="mobile-nav">
  	<div class="overlay">
  		<div class="slider-trigger"></div>
  		<h1 class="header-author js-mobile-header hide">林姐姐</h1>
  	</div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
			
				<img lazy-src="undefined" class="js-avatar">
			
			</div>
			<hgroup>
			  <h1 class="header-author">林姐姐</h1>
			</hgroup>
			
			<p class="header-subtitle">让未来的你的感谢现在的自己！</p>
			
			<nav class="header-menu">
				<ul>
				
					<li><a href="/">主页</a></li>
		        
					<li><a href="/archives">所有文章</a></li>
		        
					<li><a href="/categories/学习笔记/">学习笔记</a></li>
		        
					<li><a href="/categories/技术摘录/">技术摘录</a></li>
		        
		        <div class="clearfix"></div>
				</ul>
			</nav>
			<nav class="header-nav">
				<div class="social">
					
						<a class="github" target="_blank" href="https://github.com/linjieFE" title="github">github</a>
			        
						<a class="mail" target="_blank" href="mailto:solocode@163.com" title="mail">mail</a>
			        
				</div>
			</nav>
		</header>				
	</div>
</nav>

      <div class="body-wrap">
  
    <article id="post-react-环境搭建" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2016/10/20/react-环境搭建/" class="article-date">
  	<time datetime="2016-10-20T10:12:15.000Z" itemprop="datePublished">2016-10-20</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2016/10/20/react-环境搭建/">react 环境搭建</a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="1_u3001node_u5B89_u88C5"><a href="#1_u3001node_u5B89_u88C5" class="headerlink" title="1、node安装"></a>1、node安装</h2><p>首先，需要node环境支持，如果你还没有安装node.js，请移步<a href="https://nodejs.org/en/" target="_blank" rel="external">nodejs官网</a>。</p>
<h2 id="2_u3001_u521D_u59CB_u5316_u9879_u76EE"><a href="#2_u3001_u521D_u59CB_u5316_u9879_u76EE" class="headerlink" title="2、初始化项目"></a>2、初始化项目</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init</span><br></pre></td></tr></table></figure>
<p>回车即可 到最后，你的项目根目录会多一个package.json的文件。</p>
<h2 id="3_u3001_u6DFB_u52A0_u9879_u76EE_u4F9D_u8D56"><a href="#3_u3001_u6DFB_u52A0_u9879_u76EE_u4F9D_u8D56" class="headerlink" title="3、添加项目依赖"></a>3、添加项目依赖</h2><p>接下来，我们打开package.json文件，给项目添加依赖包。当然，最简单的方法便是直接修改package.json文件，然后通过npm install安装依赖即可，但是考虑到依赖包的不断更新迭代，或许今后的不久就已经不是当前版本，为了能保证，我们每个看到这边文章的童鞋都是用的最新依赖包，我们直接通过npm install  **  –save-dev方式来安装我们依赖包。</p>
<p>首先，我们来安装dependencies：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save react react-dom lodash</span><br></pre></td></tr></table></figure>
<p>按理来说，上面的命令并没有任何问题，但是小编却在这里遇到一个坑，那就是项目取名为react，然后再安装react的时候被拒绝<br>当然，解决方法就是重新命名，为了避免不必要的麻烦，还是推荐小伙伴们不要把项目名称命名成你要安装的包名，譬如：react，webpack等等。</p>
<p>泪的教训：如果你遇到上述的错误，请删掉该项目重新新建一个项目，因为无论如何也还是会报这个错误，包括重启也是于事无补。</p>
<p>再次安装react的时候，切忌一定要安装到生产依赖。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save-dev react</span><br></pre></td></tr></table></figure></p>
<p>不出意外，应该是可以了，接下来我们就可以安装其他依赖。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install babel babel-core babel-loader babel-preset-es2015 babel-preset-react css-loader style-loader react-router webpack webpack-dev-server</span><br></pre></td></tr></table></figure></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install react-dom lodash --save</span><br></pre></td></tr></table></figure>
<p>最后提醒一下，webpack和webpack-dev-server这两个包需要全局安装。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g webpack webpack-dev-server</span><br></pre></td></tr></table></figure></p>
<p>到这里我们的依赖包就安装完毕。</p>
<p>以下便是package.json的最终代码：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line"></span><br><span class="line"><span class="string">"name"</span>: <span class="string">"react-demo"</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"description"</span>: <span class="string">""</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"main"</span>: <span class="string">"index.js"</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"scripts"</span>: &#123;</span><br><span class="line"></span><br><span class="line"><span class="string">"test"</span>: <span class="string">"echo \"Error: no test specified\" &amp;&amp; exit 1"</span></span><br><span class="line"></span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line"><span class="string">"author"</span>: <span class="string">""</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"license"</span>: <span class="string">"ISC"</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"devDependencies"</span>: &#123;</span><br><span class="line"></span><br><span class="line"><span class="string">"babel"</span>: <span class="string">"^6.5.2"</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"babel-core"</span>: <span class="string">"^6.13.2"</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"babel-loader"</span>: <span class="string">"^6.2.4"</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"babel-preset-es2015"</span>: <span class="string">"^6.13.2"</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"babel-preset-react"</span>: <span class="string">"^6.11.1"</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"css-loader"</span>: <span class="string">"^0.23.1"</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"react"</span>: <span class="string">"^15.3.0"</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"react-hot-loader"</span>: <span class="string">"^1.3.0"</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"react-router"</span>: <span class="string">"^2.6.1"</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"style-loader"</span>: <span class="string">"^0.13.1"</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"webpack"</span>: <span class="string">"^1.13.1"</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"webpack-dev-server"</span>: <span class="string">"^1.14.1"</span></span><br><span class="line"></span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line"><span class="string">"dependencies"</span>: &#123;</span><br><span class="line"></span><br><span class="line"><span class="string">"lodash"</span>: <span class="string">"^4.15.0"</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"react-dom"</span>: <span class="string">"^15.3.0"</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h2 id="4_u3001_u914D_u7F6Ewebpack"><a href="#4_u3001_u914D_u7F6Ewebpack" class="headerlink" title="4、配置webpack"></a>4、配置webpack</h2><p>新建一个webpack.config.js文件。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line">var webpack = require(<span class="string">"webpack"</span>)</span><br><span class="line"></span><br><span class="line">var path = require(<span class="string">"path"</span>)</span><br><span class="line"></span><br><span class="line">module.exports = &#123;</span><br><span class="line"></span><br><span class="line">devtool: <span class="string">"inline-source-map"</span>,</span><br><span class="line"></span><br><span class="line">entry: [</span><br><span class="line"></span><br><span class="line"><span class="string">"webpack-dev-server/client?http://127.0.0.1:8080/"</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"webpack/hot/only-dev-server"</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"./app"</span></span><br><span class="line"></span><br><span class="line">],</span><br><span class="line"></span><br><span class="line">output: &#123;</span><br><span class="line"></span><br><span class="line">path: path.join(__dirname, <span class="string">"public"</span>),</span><br><span class="line"></span><br><span class="line">filename: <span class="string">"bundle.js"</span></span><br><span class="line"></span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line">resolve: &#123;</span><br><span class="line"></span><br><span class="line">modulesDirectories: [<span class="string">"node_modules"</span>, <span class="string">"app"</span>],</span><br><span class="line"></span><br><span class="line">extensions: [<span class="string">""</span>, <span class="string">".js"</span>]</span><br><span class="line"></span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line">module: &#123;</span><br><span class="line"></span><br><span class="line">loaders: [</span><br><span class="line"></span><br><span class="line">&#123;</span><br><span class="line"></span><br><span class="line"><span class="built_in">test</span>: /\.jsx?$/,</span><br><span class="line"></span><br><span class="line">exclude: /node_modules/,</span><br><span class="line"></span><br><span class="line">loaders: [<span class="string">"react-hot"</span>, <span class="string">"babel?presets[]=react,presets[]=es2015"</span>]</span><br><span class="line"></span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line">&#123;</span><br><span class="line"></span><br><span class="line"><span class="built_in">test</span>: /\.css?$/,</span><br><span class="line"></span><br><span class="line">exclude: /node_modules/,</span><br><span class="line"></span><br><span class="line">loaders: [<span class="string">"style"</span>, <span class="string">"css"</span>]</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line">plugins: [</span><br><span class="line"></span><br><span class="line">new webpack.HotModuleReplacementPlugin(),</span><br><span class="line"></span><br><span class="line">new webpack.NoErrorsPlugin()</span><br><span class="line"></span><br><span class="line">]</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>以上便是webpack的基本配置，具体的webpack配置以后会单独介绍。</p>
<h2 id="5_u3001_u9879_u76EE_u6587_u4EF6"><a href="#5_u3001_u9879_u76EE_u6587_u4EF6" class="headerlink" title="5、项目文件"></a>5、项目文件</h2><p><img src="/img/react_files.jpg" alt=""></p>
<p>index.html<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="doctype">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="title">html</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="title">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="title">title</span>&gt;</span>React demo<span class="tag">&lt;/<span class="title">title</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="title">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="title">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"app"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"bundle.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="title">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="title">html</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p>index.js<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">import React from 'react'</span><br><span class="line"></span><br><span class="line">import &#123;render&#125; from 'react-dom'render(</span><br><span class="line"></span><br><span class="line">render(<span class="tag">&lt;<span class="title">div</span>&gt;</span>hello wold<span class="tag">&lt;/<span class="title">div</span>&gt;</span>,document.getElementById("app"));</span><br></pre></td></tr></table></figure></p>
<p>这个时候，一个简单的hello word就已经完成，运行如下命令</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">webpack-dev-server</span><br></pre></td></tr></table></figure>
<p>使用浏览器打开<a href="http://127.0.0.1:8080就能看到hello" target="_blank" rel="external">http://127.0.0.1:8080就能看到hello</a> world。这里的webpack-dev-server可以实时监测文件修改，已实时观看最终效果。</p>
<p>但是每次要预览效果，我们要输入这么一大串，难免有所不便，</p>
<p>打开package.json文件，找到scripts结点，更改如下所示：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"scripts"</span>: &#123;</span><br><span class="line"></span><br><span class="line"><span class="string">"test"</span>: <span class="string">"echo \"Error: no test specified\" &amp;&amp; exit 1"</span>,</span><br><span class="line"></span><br><span class="line"><span class="string">"dev"</span>:<span class="string">"webpack-dev-server"</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>这样，我们就只需要在命令行中输入：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run dev</span><br></pre></td></tr></table></figure></p>
<p>当然，如果你嫌上面的步骤太过繁琐，你可以直接下载<a href="https://github.com/swimly/react-demo" target="_blank" rel="external">github</a>上面的代码，然后直接运行：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install</span><br></pre></td></tr></table></figure></p>
<p>文／Swimly（简书作者）<br>原文链接：<a href="http://www.jianshu.com/p/0d7a70e39d2e" target="_blank" rel="external">http://www.jianshu.com/p/0d7a70e39d2e</a><br>著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。</p>

      
    </div>
    
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/react/">react</a></li></ul>
	</div>

      

      
      <div class="clearfix"></div>
    </div>
    
  </div>
  
</article>









  
    <article id="post-react-native-第一个demo" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2016/10/20/react-native-第一个demo/" class="article-date">
  	<time datetime="2016-10-20T07:18:06.000Z" itemprop="datePublished">2016-10-20</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2016/10/20/react-native-第一个demo/">react-native 第一个demo</a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="React_Native_Mac_u73AF_u5883_u642D_u5EFA"><a href="#React_Native_Mac_u73AF_u5883_u642D_u5EFA" class="headerlink" title="React Native Mac环境搭建"></a>React Native Mac环境搭建</h1><h2 id="1_u3001_u5B89_u88C5Homebrew"><a href="#1_u3001_u5B89_u88C5Homebrew" class="headerlink" title="1、安装Homebrew"></a>1、安装Homebrew</h2><p>安装Homebrew是为安装Node.js做前提准备。<br>安装命令:<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">/usr/bin/ruby <span class="operator">-e</span> <span class="string">"<span class="variable">$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)</span>"</span></span><br></pre></td></tr></table></figure></p>
<p>注：可以通过下面命令查看Homebrew是否安装成功<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">brew -v</span><br><span class="line">Homebrew/homebrew-core (git revision <span class="number">93</span>f1; last commit <span class="number">2016</span>-<span class="number">05</span>-<span class="number">23</span>)</span><br></pre></td></tr></table></figure></p>
<h2 id="2_u3001_u5B89_u88C5Node-js"><a href="#2_u3001_u5B89_u88C5Node-js" class="headerlink" title="2、安装Node.js"></a>2、安装Node.js</h2><p>下载双击安装即可：<br>下载地址：<br><a href="https://nodejs.org/en/" target="_blank" rel="external">https://nodejs.org/en/</a><br>Node.js 需要 4.0 及其以上版本。安装好之后，npm 也有了。</p>
<h2 id="3_u3001_u5B89_u88C5React_Native__u547D_u4EE4_u884C_u5DE5_u5177"><a href="#3_u3001_u5B89_u88C5React_Native__u547D_u4EE4_u884C_u5DE5_u5177" class="headerlink" title="3、安装React Native 命令行工具"></a>3、安装React Native 命令行工具</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo npm install -g react-native-cli</span><br></pre></td></tr></table></figure>
<h2 id="4_u3001_u5B89_u88C5Xcode_uFF0C_u4F30_u8BA1iOS_u5F00_u53D1_u7684_u57FA_u672C_u90FD_u5B89_u88C5_u6709"><a href="#4_u3001_u5B89_u88C5Xcode_uFF0C_u4F30_u8BA1iOS_u5F00_u53D1_u7684_u57FA_u672C_u90FD_u5B89_u88C5_u6709" class="headerlink" title="4、安装Xcode，估计iOS开发的基本都安装有."></a>4、安装Xcode，估计iOS开发的基本都安装有.</h2><p>Xcode 7.0 或更高版本下载地 址：<br><a href="https://developer.apple.com/xcode/downloads/" target="_blank" rel="external">https://developer.apple.com/xcode/downloads/</a></p>
<h2 id="5_u3001_u5B89_u88C5_watchman__u548C_flow"><a href="#5_u3001_u5B89_u88C5_watchman__u548C_flow" class="headerlink" title="5、安装 watchman 和 flow"></a>5、安装 watchman 和 flow</h2><p>监控文件变化和类型检查的。安装如下</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">brew install watchman</span><br><span class="line">brew install flow</span><br></pre></td></tr></table></figure>
<h2 id="6_u3001_u521D_u59CB_u5316_u4E00_u4E2A_u9879_u76EE"><a href="#6_u3001_u521D_u59CB_u5316_u4E00_u4E2A_u9879_u76EE" class="headerlink" title="6、初始化一个项目"></a>6、初始化一个项目</h2><p>打开终端，在某个目录下输入命令(这一步会有点慢，耐心等待一下):<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">react-native init HelloWorld</span><br></pre></td></tr></table></figure></p>
<h3 id="u8FD0_u884C_u9879_u76EE"><a href="#u8FD0_u884C_u9879_u76EE" class="headerlink" title="运行项目"></a>运行项目</h3><p><img src="/img/rn-desk.png" alt=""></p>
<p>用XCode打开ios/HelloWorld.xcodeproj文件，点击键盘”⌘-R”或者点击”Run”，编译运行项目。会启动React-Native服务和iOS模拟器。<br>在iOS模拟器中可以看到如图界面：<br><img src="/img/rn_helloworld.png" alt=""></p>
<p>React-Native服务在编写过程中要一直开着 如果不小心把它关了，没关系，可以在终端输入：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm start</span><br></pre></td></tr></table></figure>
<p>来重新开启服务</p>
<p>好了，看到这里，如果你已经成功配置了React-Native的环境，并且新建并成功运行了第一个程序了。那么，就先恭喜了，我们甚至没有写一行代码，就已经成功运行了第一个React-Native的程序，是不是还挺简单的。正所谓，良好的开端是成功的一半。</p>

      
    </div>
    
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/react-native/">react-native</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/学习笔记/">学习笔记</a></li></ul>
	</div>

      
	<div class="article-category tagcloud">
	<a class="article-category-link" href="/categories/学习笔记/">学习笔记</a>
	</div>


      
      <div class="clearfix"></div>
    </div>
    
  </div>
  
</article>









  
    <article id="post-gulp学习笔记" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2016/07/12/gulp学习笔记/" class="article-date">
  	<time datetime="2016-07-12T03:51:33.000Z" itemprop="datePublished">2016-07-12</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2016/07/12/gulp学习笔记/">gulp学习笔记</a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>Gulp前端自动化：Gulp的高度集成化开发环境，释放了前端开发中大量时间，如css压缩、js压缩、错误检查、合并js、压缩图片、压缩html、模块构造等，只要你能想到的基本都可以通过Gulp插件去实现。</p>
<h2 id="u524D_u7AEF_u81EA_u52A8_u5316_u7684_u76EE_u7684"><a href="#u524D_u7AEF_u81EA_u52A8_u5316_u7684_u76EE_u7684" class="headerlink" title="前端自动化的目的"></a>前端自动化的目的</h2><p>在一个项目过程中，重复而枯燥的工作太多了……绳命就这样浪费了。<br>我们需要一个自动化的工作流程，让我们更专注于coding，而不是coding外的繁琐工作。于是Gulp应运而生。可以想像，如果在node环境下，一行命令搞定一个场景，So Cool…<br>然而通过了解，显然可看出Gulp</p>
<h3 id="u529F_u80FD"><a href="#u529F_u80FD" class="headerlink" title="功能"></a>功能</h3><p>1.版本控制<br>2.检查JS<br>3.图片合并<br>4.压缩CSS<br>5.压缩JS<br>6.编译SASS</p>
<p>目前最知名的构建工具： Gulp、Grunt、NPM + Webpack；</p>
<p>. grunt是前端工程化的先驱</p>
<p>. gulp更自然基于流的方式连接任务</p>
<p>. Webpack最年轻，擅长用于依赖管理，配置稍较复杂</p>
<p>. 推荐使用Gulp，Gulp基于nodejs中stream，效率更好语法更自然,不需要编写复杂的配置文件</p>
<h2 id="u5B89_u88C5_u524D_u51C6_u5907_uFF1A"><a href="#u5B89_u88C5_u524D_u51C6_u5907_uFF1A" class="headerlink" title="安装前准备："></a>安装前准备：</h2><p>Gulp是基于 Node.js的，需要要安装 Node.js</p>
<p>为了确保依赖环境正确，我们先执行几个简单的命令检查。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">$ node -v</span><br><span class="line"></span><br><span class="line">v5.<span class="number">3.0</span></span><br><span class="line"></span><br><span class="line">Node是一个基于Chrome JavaScript V8引擎建立的一个解释器</span><br><span class="line">检测Node是否已经安装，如果正确安装的话你会看到所安装的Node的版本号</span><br><span class="line"></span><br><span class="line">接下来看看npm，它是 node 的包管理工具，可以利用它安装 gulp 所需的包</span><br><span class="line"></span><br><span class="line">$ npm -v</span><br><span class="line"></span><br><span class="line"><span class="number">3.3</span>.<span class="number">12</span></span><br><span class="line"></span><br><span class="line">这同样能得到npm的版本号，装 Node 时已经自动安装了npm</span><br></pre></td></tr></table></figure></p>
<h2 id="u5F00_u59CB_u5168_u5C40_u5B89_u88C5Gulp"><a href="#u5F00_u59CB_u5168_u5C40_u5B89_u88C5Gulp" class="headerlink" title="开始全局安装Gulp"></a>开始全局安装Gulp</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install -g gulp</span><br></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$ gulp -v</span><br><span class="line"></span><br><span class="line">[<span class="number">18</span>:<span class="number">39</span>:<span class="number">18</span>] CLI version <span class="number">3.9</span>.<span class="number">1</span></span><br><span class="line"></span><br><span class="line">得到gulp的版本号，确认安装成功</span><br></pre></td></tr></table></figure>
<h2 id="u521B_u5EFA_u5DE5_u7A0B"><a href="#u521B_u5EFA_u5DE5_u7A0B" class="headerlink" title="创建工程"></a>创建工程</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">TestProject     (项目名称)</span><br><span class="line">|–.git               通过git进行版本控制,项目自动生成这个文件</span><br><span class="line">|–node_modules       组件包目录</span><br><span class="line">|–dist               发布环境（编译自动生成的）</span><br><span class="line">    |–css                 样式文件(style.css style.min.css)</span><br><span class="line">    |–img                 图片文件(压缩图片\合并后的图片)</span><br><span class="line">    |–js                  js文件(main.js main.min.js)</span><br><span class="line">    |–index.html          静态页面文件(压缩html)</span><br><span class="line"></span><br><span class="line">|–src                开发环境</span><br><span class="line">    |–sass                sass文件</span><br><span class="line">    |–images              图片文件</span><br><span class="line">    |–js                  js文件</span><br><span class="line">    |–index.html          静态文件</span><br><span class="line">|–gulpfile.js        gulp配置文件</span><br><span class="line">|–package.json       依赖模块json文件,在项目目录下npm install会安装项目所有的依赖模块，简化项目的安装程序</span><br></pre></td></tr></table></figure>
<h2 id="u521B_u5EFApackage-json"><a href="#u521B_u5EFApackage-json" class="headerlink" title="创建package.json"></a>创建package.json</h2><p>我们先使用npm init来创建类似Nuget package的package.config一样的文件，这样我们就知道项目依赖哪些插件，而且我们不需要把插件提交到代码库，其它程序员只需要使用 npm install 就可以安装所有配置的插件</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">$ npm init</span><br><span class="line">This utility will walk you through creating a package.json file.</span><br><span class="line">It only covers the most common items, and tries to guess sensible defaults.</span><br><span class="line"></span><br><span class="line">See `npm <span class="built_in">help</span> json` <span class="keyword">for</span> definitive documentation on these fields</span><br><span class="line">and exactly what they do.</span><br><span class="line"></span><br><span class="line">Use `npm install &lt;pkg&gt; --save` afterwards to install a package and</span><br><span class="line">save it as a dependency <span class="keyword">in</span> the package.json file.</span><br><span class="line"></span><br><span class="line">Press ^C at any time to quit.</span><br><span class="line">name: (<span class="built_in">test</span>) <span class="built_in">test</span>                  //名称</span><br><span class="line">version: (<span class="number">1.0</span>.<span class="number">0</span>) <span class="number">1.0</span>.<span class="number">0</span>             //版本</span><br><span class="line">description: <span class="built_in">test</span> description      //描述</span><br><span class="line">entry point: (index.js)            //</span><br><span class="line"><span class="built_in">test</span> <span class="built_in">command</span>:                      //测试代码</span><br><span class="line">git repository:                    //Git版本库</span><br><span class="line">keywords:                          //关键词</span><br><span class="line">author: luuman                     //作者</span><br><span class="line">license: (ISC)                     //协议</span><br><span class="line">About to write to F:\Gulp\<span class="built_in">test</span>\package.json:</span><br><span class="line"></span><br><span class="line">&#123;</span><br><span class="line">  <span class="string">"name"</span>: <span class="string">"test"</span>,</span><br><span class="line">  <span class="string">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="string">"description"</span>: <span class="string">"test description"</span>,</span><br><span class="line">  <span class="string">"main"</span>: <span class="string">"index.js"</span>,</span><br><span class="line">  <span class="string">"scripts"</span>: &#123;</span><br><span class="line">    <span class="string">"test"</span>: <span class="string">"echo \"Error: no test specified\" &amp;&amp; exit 1"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">"author"</span>: <span class="string">"luuman"</span>,</span><br><span class="line">  <span class="string">"license"</span>: <span class="string">"ISC"</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Is this ok? (yes)</span><br></pre></td></tr></table></figure>
<h2 id="u6211_u4EEC_u8981_u8FDB_u53BB_u5230_u9879_u76EE_u7684_u6839_u76EE_u5F55_u518D_u5B89_u88C5_u4E00_u904D"><a href="#u6211_u4EEC_u8981_u8FDB_u53BB_u5230_u9879_u76EE_u7684_u6839_u76EE_u5F55_u518D_u5B89_u88C5_u4E00_u904D" class="headerlink" title="我们要进去到项目的根目录再安装一遍"></a>我们要进去到项目的根目录再安装一遍</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install gulp --save-dev</span><br></pre></td></tr></table></figure>
<h2 id="u65B0_u5EFAgulpfile-js_u6587_u4EF6"><a href="#u65B0_u5EFAgulpfile-js_u6587_u4EF6" class="headerlink" title="新建gulpfile.js文件"></a>新建gulpfile.js文件</h2><p>我们将要使用Gulp插件来完成我们以下任务：</p>
<p>. sass的编译（gulp-sass）<br>. 自动添加css前缀（gulp-autoprefixer）<br>. 压缩css（gulp-minify-css）<br>. js代码校验（gulp-jshint）<br>. 合并js文件（gulp-concat）<br>. 压缩js代码（gulp-uglify）<br>. 压缩图片（gulp-imagemin）<br>. 自动刷新页面（gulp-livereload）<br>. 图片缓存，只有图片替换了才压缩（gulp-cache）<br>. 更改提醒（gulp-notify）</p>
<h3 id="u5B89_u88C5_u8FD9_u4E9B_u63D2_u4EF6_u9700_u8981_u8FD0_u884C_u5982_u4E0B_u547D_u4EE4_uFF1A"><a href="#u5B89_u88C5_u8FD9_u4E9B_u63D2_u4EF6_u9700_u8981_u8FD0_u884C_u5982_u4E0B_u547D_u4EE4_uFF1A" class="headerlink" title="安装这些插件需要运行如下命令："></a>安装这些插件需要运行如下命令：</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install gulp-jshint gulp-sass gulp-less gulp-autoprefixer gulp-clean-css gulp-imagemin gulp-notify gulp-cache imagemin-pngquant gulp-livereload gulp-concat gulp-uglify  gulp-rename  gulp-babel del --save-dev</span><br></pre></td></tr></table></figure>
<p>gulp功能模块的文件会放在项目所在的目录的./node_modules 下<br>更多插件可以看这里<a href="http://gulpjs.com/plugins/" target="_blank" rel="external">gulpjs.com/plugins/</a></p>
<p>接着我们要创建一个gulpfile.js在根目录下，gulp只有四个API： task，watch，src，和 dest</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">task--这个API用来创建任务，在命令行下可以输入 gulp <span class="built_in">test</span> 来执行<span class="built_in">test</span>的任务。</span><br><span class="line">watch--这个API用来监听任务。</span><br><span class="line">src--这个API设置需要处理的文件的路径，可以是多个文件以数组的形式[main.scss, vender.scss]，也可以是正则表达式/**/*.scss。</span><br><span class="line"></span><br><span class="line">dest--这个API设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，另一个可以输出压缩后的版本。</span><br></pre></td></tr></table></figure>
<h3 id="u52A0_u8F7D_u63D2_u4EF6_uFF1A"><a href="#u52A0_u8F7D_u63D2_u4EF6_uFF1A" class="headerlink" title="加载插件："></a>加载插件：</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">// 引入gulp</span><br><span class="line">var gulp = require(<span class="string">'gulp'</span>);</span><br><span class="line"></span><br><span class="line">// 引入组件</span><br><span class="line">var jshint = require(<span class="string">'gulp-jshint'</span>); //检查js代码校验</span><br><span class="line">var sass = require(<span class="string">'gulp-sass'</span>); //编译Sass</span><br><span class="line">var less = require(<span class="string">'gulp-less'</span>); //编译less</span><br><span class="line">var autoprefixer = require(<span class="string">'gulp-autoprefixer'</span>);</span><br><span class="line">var cleancss = require(<span class="string">'gulp-clean-css'</span>);</span><br><span class="line">var imagemin = require(<span class="string">'gulp-imagemin'</span>); //压缩图片</span><br><span class="line">var notify = require(<span class="string">'gulp-notify'</span>); //处理报错</span><br><span class="line">var cache = require(<span class="string">'gulp-cache'</span>); //图片缓存，只有图片替换了才压缩</span><br><span class="line">var pngquant = require(<span class="string">'imagemin-pngquant'</span>); //深度压缩图片</span><br><span class="line">var livereload = require(<span class="string">'gulp-livereload'</span>); //服务器控制客户端同步刷新（需配合chrome插件LiveReload及tiny-lr）</span><br><span class="line">var concat = require(<span class="string">'gulp-concat'</span>); //合并js</span><br><span class="line">var uglify = require(<span class="string">'gulp-uglify'</span>); //uglify 组件（用于压缩 JS）</span><br><span class="line">var rename = require(<span class="string">'gulp-rename'</span>); //重命名</span><br><span class="line">var babel = require(<span class="string">'gulp-babel'</span>); //编译es6</span><br><span class="line">var del = require(<span class="string">'del'</span>);//清除文件</span><br><span class="line">var plumber = require(<span class="string">'gulp-plumber'</span>);//当发生异常时提示错误</span><br></pre></td></tr></table></figure>
<p>最后是我自己设置的项目文件路径</p>
<p>|–/src/——–开发环境<br>|–/desc/——-生成目录<br>|–/plugin/—–插件存放目录<br>|–gulpfile.js</p>
<h3 id="u7F16_u8BD1sass_u3001_u81EA_u52A8_u6DFB_u52A0css_u524D_u7F00_u548C_u538B_u7F29"><a href="#u7F16_u8BD1sass_u3001_u81EA_u52A8_u6DFB_u52A0css_u524D_u7F00_u548C_u538B_u7F29" class="headerlink" title="编译sass、自动添加css前缀和压缩"></a>编译sass、自动添加css前缀和压缩</h3><p>首先我们编译sass，添加前缀，保存到我们指定的目录下面，还没结束，我们还要压缩，给文件添加 .min 后缀再输出压缩文件到指定目录，最后提醒任务完成了：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">// Styles任务</span><br><span class="line">gulp.task(<span class="string">'styles'</span>, <span class="function"><span class="title">function</span></span>() &#123;</span><br><span class="line">    //编译sass</span><br><span class="line">    <span class="built_in">return</span> gulp.src([<span class="string">'src/less/*.less'</span>,<span class="string">'src/css/*.css'</span>])</span><br><span class="line">    //css 合并</span><br><span class="line">    .pipe(concat(<span class="string">'all.css'</span>))</span><br><span class="line">    //当发生异常时提示错误 确保本地安装gulp-notify和gulp-plumber</span><br><span class="line">    .pipe(plumber(&#123; errorHandler: notify.onError(<span class="string">'Error: &lt;%= error.message %&gt;'</span>) &#125;))</span><br><span class="line">    .pipe(less())</span><br><span class="line">    .pipe(gulp.dest(<span class="string">'src/css'</span>))</span><br><span class="line">    //添加前缀</span><br><span class="line">    .pipe(autoprefixer(<span class="string">'last 2 version'</span>, <span class="string">'safari 5'</span>, <span class="string">'ie 8'</span>, <span class="string">'ie 9'</span>, <span class="string">'opera 12.1'</span>, <span class="string">'ios 6'</span>, <span class="string">'android 4'</span>))</span><br><span class="line">    //保存未压缩文件到我们指定的目录下面</span><br><span class="line">    .pipe(gulp.dest(<span class="string">'src'</span>))</span><br><span class="line">    //给文件添加.min后缀</span><br><span class="line">    .pipe(rename(&#123; suffix: <span class="string">'.min'</span> &#125;))</span><br><span class="line">    //压缩样式文件</span><br><span class="line">    .pipe(cleancss())</span><br><span class="line">    //输出压缩文件到指定目录</span><br><span class="line">    .pipe(gulp.dest(<span class="string">'dist/css'</span>))    </span><br><span class="line">    //提醒任务完成</span><br><span class="line">    .pipe(notify(&#123; message: <span class="string">'Styles task complete'</span> &#125;));</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="js_u4EE3_u7801_u6821_u9A8C_u3001_u5408_u5E76_u548C_u538B_u7F29"><a href="#js_u4EE3_u7801_u6821_u9A8C_u3001_u5408_u5E76_u548C_u538B_u7F29" class="headerlink" title="js代码校验、合并和压缩"></a>js代码校验、合并和压缩</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">// 合并，压缩js文件</span><br><span class="line">// 找到 js/ 目录下的所有 js 文件，压缩，重命名，最后将处理完成的js存放在 dist/js/ 目录下</span><br><span class="line">gulp.task(<span class="string">'scripts'</span>, <span class="function"><span class="title">function</span></span>() &#123;</span><br><span class="line">    <span class="built_in">return</span> gulp.src(<span class="string">'src/js/*.js'</span>) //可配置你需要检查脚本的具体名字。</span><br><span class="line">        //js代码校验</span><br><span class="line">        .pipe(jshint())</span><br><span class="line">        .pipe(jshint.reporter(<span class="string">'default'</span>))</span><br><span class="line">        //js代码合并</span><br><span class="line">        .pipe(concat(<span class="string">'all.js'</span>))</span><br><span class="line">        //压缩脚本文件</span><br><span class="line">        .pipe(uglify())</span><br><span class="line">        //给文件添加.min后缀</span><br><span class="line">        .pipe(rename(&#123; suffix: <span class="string">'.min'</span> &#125;))</span><br><span class="line">        //压缩脚本文件</span><br><span class="line">        .pipe(uglify())</span><br><span class="line">        //输出压缩文件到指定目录</span><br><span class="line">        .pipe(gulp.dest(<span class="string">'dist/js'</span>))</span><br><span class="line">    //提醒任务完成</span><br><span class="line">    .pipe(notify(&#123; message: <span class="string">'Scripts task complete'</span> &#125;))</span><br><span class="line">    console.log(<span class="string">'gulp task is done'</span>); //自定义提醒信息</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="u56FE_u7247_u538B_u7F29"><a href="#u56FE_u7247_u538B_u7F29" class="headerlink" title="图片压缩"></a>图片压缩</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">//压缩图片</span><br><span class="line">gulp.task(<span class="string">'testImagemin'</span>, <span class="function"><span class="title">function</span></span>() &#123;</span><br><span class="line">   <span class="built_in">return</span> gulp.src(<span class="string">'src/img/*.&#123;png,jpg,gif,ico&#125;'</span>)</span><br><span class="line">        .pipe(cache(imagemin(&#123;</span><br><span class="line">            progressive: <span class="literal">true</span>,</span><br><span class="line">            svgoPlugins: [&#123; removeViewBox: <span class="literal">false</span> &#125;],</span><br><span class="line">            use: [pngquant()]</span><br><span class="line">        &#125;)))</span><br><span class="line">        .pipe(gulp.dest(<span class="string">'dist/img'</span>))</span><br><span class="line">        .pipe(notify(&#123; message: <span class="string">'Images task complete'</span> &#125;));</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="u4E8B_u4EF6_u76D1_u542C"><a href="#u4E8B_u4EF6_u76D1_u542C" class="headerlink" title="事件监听"></a>事件监听</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">//监听 Watch</span><br><span class="line">gulp.task(<span class="string">'testWatch'</span>, <span class="function"><span class="title">function</span></span>() &#123;</span><br><span class="line">    // Watch .less files</span><br><span class="line">    gulp.watch(<span class="string">'src/**/*.less'</span>, [<span class="string">'testLess'</span>]); //当所有less文件发生改变时，调用<span class="built_in">test</span>Less任务</span><br><span class="line">    // Watch image files</span><br><span class="line">    gulp.watch(<span class="string">'src/**/*.img'</span>, [<span class="string">'testImagemin'</span>]);</span><br><span class="line">    // Watch .js files</span><br><span class="line">    gulp.watch(<span class="string">'js/*.js'</span>, [<span class="string">'scripts'</span>]);</span><br><span class="line">    // Create LiveReload server</span><br><span class="line">   livereload.listen();</span><br><span class="line">   // Watch any files <span class="keyword">in</span> assets/, reload on change</span><br><span class="line">   gulp.watch([<span class="string">'dist/**'</span>]).on(<span class="string">'change'</span>, livereload.changed);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="u6E05_u9664_u6587_u4EF6"><a href="#u6E05_u9664_u6587_u4EF6" class="headerlink" title="清除文件"></a>清除文件</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">//clean 清除文件 在任务执行前，最好先清除之前生成的文件</span><br><span class="line">gulp.task(<span class="string">'clean'</span>, <span class="keyword">function</span>(cb) &#123;</span><br><span class="line">    del([<span class="string">'dist/css'</span>, <span class="string">'dist/js'</span>, <span class="string">'dist/img'</span>], cb)</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="u9ED8_u8BA4_u4EFB_u52A1"><a href="#u9ED8_u8BA4_u4EFB_u52A1" class="headerlink" title="默认任务"></a>默认任务</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">// 默认任务 Default task</span><br><span class="line">gulp.task(<span class="string">'default'</span>, [<span class="string">'clean'</span>],<span class="function"><span class="title">function</span></span>() &#123;</span><br><span class="line">    gulp.start(<span class="string">'help'</span>,<span class="string">'testLess'</span>, <span class="string">'scripts'</span>, <span class="string">'testImagemin'</span>);</span><br><span class="line">    gulp.src(<span class="string">'src/js/*.js'</span>)</span><br><span class="line">        .pipe(babel(&#123;</span><br><span class="line">            presets: [<span class="string">'es2015'</span>]</span><br><span class="line">        &#125;))</span><br><span class="line">        .pipe(gulp.dest(<span class="string">'src/bjs'</span>))</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h2 id="u5176_u5B83_u63D2_u4EF6"><a href="#u5176_u5B83_u63D2_u4EF6" class="headerlink" title="其它插件"></a>其它插件</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">// 检查js脚本的任务</span><br><span class="line">gulp.task(<span class="string">'lint'</span>, <span class="function"><span class="title">function</span></span>() &#123;</span><br><span class="line">  <span class="built_in">return</span> gulp.src(<span class="string">'js/*.js'</span>) //可配置你需要检查脚本的具体名字。</span><br><span class="line">        .pipe(jshint())</span><br><span class="line">        .pipe(jshint.reporter(<span class="string">'default'</span>));</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">// 编译Sass</span><br><span class="line">gulp.task(<span class="string">'sass'</span>, <span class="function"><span class="title">function</span></span>() &#123;</span><br><span class="line">  <span class="built_in">return</span> gulp.src(<span class="string">'./scss/*.scss'</span>)</span><br><span class="line">        .pipe(sass())</span><br><span class="line">        .pipe(gulp.dest(<span class="string">'css/'</span>));//dest()写入文件</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">// 编译less</span><br><span class="line">gulp.task(<span class="string">'testLess'</span>, <span class="function"><span class="title">function</span></span>() &#123;</span><br><span class="line">  <span class="built_in">return</span> gulp.src(<span class="string">'src/less/*.less'</span>)</span><br><span class="line">        //当发生异常时提示错误 确保本地安装gulp-notify和gulp-plumber</span><br><span class="line">        .pipe(plumber(&#123; errorHandler: notify.onError(<span class="string">'Error: &lt;%= error.message %&gt;'</span>) &#125;))</span><br><span class="line">        .pipe(less())</span><br><span class="line">        .pipe(gulp.dest(<span class="string">'src/css'</span>));</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm list | gulp &lt;模糊插件匹配&gt;</span><br></pre></td></tr></table></figure>
<h3 id="gulp__u6700_u7EC8_u914D_u7F6E_u6587_u4EF6"><a href="#gulp__u6700_u7EC8_u914D_u7F6E_u6587_u4EF6" class="headerlink" title="gulp 最终配置文件"></a>gulp 最终配置文件</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br></pre></td><td class="code"><pre><span class="line">// 引入gulp</span><br><span class="line">var gulp = require(<span class="string">'gulp'</span>);</span><br><span class="line"></span><br><span class="line">// 引入组件</span><br><span class="line">var jshint = require(<span class="string">'gulp-jshint'</span>); //检查js代码校验</span><br><span class="line">var sass = require(<span class="string">'gulp-sass'</span>); //编译Sass</span><br><span class="line">var less = require(<span class="string">'gulp-less'</span>); //编译less</span><br><span class="line">var autoprefixer = require(<span class="string">'gulp-autoprefixer'</span>);</span><br><span class="line">var cleancss = require(<span class="string">'gulp-clean-css'</span>);</span><br><span class="line">var imagemin = require(<span class="string">'gulp-imagemin'</span>); //压缩图片</span><br><span class="line">var notify = require(<span class="string">'gulp-notify'</span>); //处理报错</span><br><span class="line">var cache = require(<span class="string">'gulp-cache'</span>); //图片缓存，只有图片替换了才压缩</span><br><span class="line">var pngquant = require(<span class="string">'imagemin-pngquant'</span>); //深度压缩图片</span><br><span class="line">var livereload = require(<span class="string">'gulp-livereload'</span>); //服务器控制客户端同步刷新（需配合chrome插件LiveReload及tiny-lr）</span><br><span class="line">var concat = require(<span class="string">'gulp-concat'</span>); //合并js</span><br><span class="line">var uglify = require(<span class="string">'gulp-uglify'</span>); //uglify 组件（用于压缩 JS）</span><br><span class="line">var rename = require(<span class="string">'gulp-rename'</span>); //重命名</span><br><span class="line">var babel = require(<span class="string">'gulp-babel'</span>); //编译es6</span><br><span class="line">var del = require(<span class="string">'del'</span>);//清除文件</span><br><span class="line">var plumber = require(<span class="string">'gulp-plumber'</span>);//当发生异常时提示错误</span><br><span class="line"></span><br><span class="line">// 默认任务 Default task</span><br><span class="line">gulp.task(<span class="string">'default'</span>, [<span class="string">'clean'</span>] ,<span class="function"><span class="title">function</span></span>() &#123;</span><br><span class="line">    gulp.start(<span class="string">'help'</span>,<span class="string">'styles'</span>, <span class="string">'scripts'</span>, <span class="string">'testImagemin'</span>);</span><br><span class="line">    gulp.src(<span class="string">'src/js/*.js'</span>)</span><br><span class="line">        .pipe(babel(&#123;</span><br><span class="line">            presets: [<span class="string">'es2015'</span>]</span><br><span class="line">        &#125;))</span><br><span class="line">        .pipe(gulp.dest(<span class="string">'src/bjs'</span>))</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">// <span class="built_in">help</span> task</span><br><span class="line">gulp.task(<span class="string">'help'</span>, <span class="function"><span class="title">function</span></span>() &#123;</span><br><span class="line">    console.log(<span class="string">"gulp build  文件打包"</span>);</span><br><span class="line">    console.log(<span class="string">"gulp watch  文件监控"</span>);</span><br><span class="line">    console.log(<span class="string">"gulp help  gulp参数说明"</span>);</span><br><span class="line">    console.log(<span class="string">"gulp server  测试sever"</span>);</span><br><span class="line">    console.log(<span class="string">"gulp -p  生产环境"</span>);</span><br><span class="line">    console.log(<span class="string">"gulp -d  开发环境"</span>);</span><br><span class="line">    console.log(<span class="string">"gulp -m &lt;module&gt;  部分模块打包（默认全部打包）"</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">// 检查js脚本的任务</span><br><span class="line">gulp.task(<span class="string">'lint'</span>, <span class="function"><span class="title">function</span></span>() &#123;</span><br><span class="line">  <span class="built_in">return</span> gulp.src(<span class="string">'js/*.js'</span>) //可配置你需要检查脚本的具体名字。</span><br><span class="line">        .pipe(jshint())</span><br><span class="line">        .pipe(jshint.reporter(<span class="string">'default'</span>));</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">// 编译Sass</span><br><span class="line">gulp.task(<span class="string">'sass'</span>, <span class="function"><span class="title">function</span></span>() &#123;</span><br><span class="line">  <span class="built_in">return</span> gulp.src(<span class="string">'./scss/*.scss'</span>)</span><br><span class="line">        .pipe(sass())</span><br><span class="line">        .pipe(gulp.dest(<span class="string">'css/'</span>));//dest()写入文件</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">// 编译less</span><br><span class="line">gulp.task(<span class="string">'testLess'</span>, <span class="function"><span class="title">function</span></span>() &#123;</span><br><span class="line">  <span class="built_in">return</span> gulp.src(<span class="string">'src/less/*.less'</span>)</span><br><span class="line">        //当发生异常时提示错误 确保本地安装gulp-notify和gulp-plumber</span><br><span class="line">        .pipe(plumber(&#123; errorHandler: notify.onError(<span class="string">'Error: &lt;%= error.message %&gt;'</span>) &#125;))</span><br><span class="line">        .pipe(less())</span><br><span class="line">        .pipe(gulp.dest(<span class="string">'src/css'</span>));</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">// Styles任务</span><br><span class="line">gulp.task(<span class="string">'styles'</span>, <span class="function"><span class="title">function</span></span>() &#123;</span><br><span class="line">    //编译sass</span><br><span class="line">    <span class="built_in">return</span> gulp.src([<span class="string">'src/less/*.less'</span>,<span class="string">'src/css/*.css'</span>])</span><br><span class="line">    //css 合并</span><br><span class="line">    .pipe(concat(<span class="string">'all.css'</span>))</span><br><span class="line">    //当发生异常时提示错误 确保本地安装gulp-notify和gulp-plumber</span><br><span class="line">    .pipe(plumber(&#123; errorHandler: notify.onError(<span class="string">'Error: &lt;%= error.message %&gt;'</span>) &#125;))</span><br><span class="line">    .pipe(less())</span><br><span class="line">    .pipe(gulp.dest(<span class="string">'src/css'</span>))</span><br><span class="line">    //添加前缀</span><br><span class="line">    .pipe(autoprefixer(<span class="string">'last 2 version'</span>, <span class="string">'safari 5'</span>, <span class="string">'ie 8'</span>, <span class="string">'ie 9'</span>, <span class="string">'opera 12.1'</span>, <span class="string">'ios 6'</span>, <span class="string">'android 4'</span>))</span><br><span class="line">    //保存未压缩文件到我们指定的目录下面</span><br><span class="line">    .pipe(gulp.dest(<span class="string">'src'</span>))</span><br><span class="line">    //给文件添加.min后缀</span><br><span class="line">    .pipe(rename(&#123; suffix: <span class="string">'.min'</span> &#125;))</span><br><span class="line">    //压缩样式文件</span><br><span class="line">    .pipe(cleancss())</span><br><span class="line">    //输出压缩文件到指定目录</span><br><span class="line">    .pipe(gulp.dest(<span class="string">'dist/css'</span>))    </span><br><span class="line">    //提醒任务完成</span><br><span class="line">    .pipe(notify(&#123; message: <span class="string">'Styles task complete'</span> &#125;));</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">//压缩图片</span><br><span class="line">gulp.task(<span class="string">'testImagemin'</span>, <span class="function"><span class="title">function</span></span>() &#123;</span><br><span class="line">   <span class="built_in">return</span> gulp.src(<span class="string">'src/img/*.&#123;png,jpg,gif,ico&#125;'</span>)</span><br><span class="line">        .pipe(cache(imagemin(&#123;</span><br><span class="line">            progressive: <span class="literal">true</span>,</span><br><span class="line">            svgoPlugins: [&#123; removeViewBox: <span class="literal">false</span> &#125;],</span><br><span class="line">            use: [pngquant()]</span><br><span class="line">        &#125;)))</span><br><span class="line">        .pipe(gulp.dest(<span class="string">'dist/img'</span>))</span><br><span class="line">        .pipe(notify(&#123; message: <span class="string">'Images task complete'</span> &#125;));</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">// 合并，压缩js文件</span><br><span class="line">// 找到 js/ 目录下的所有 js 文件，压缩，重命名，最后将处理完成的js存放在 dist/js/ 目录下</span><br><span class="line">gulp.task(<span class="string">'scripts'</span>, <span class="function"><span class="title">function</span></span>() &#123;</span><br><span class="line">    <span class="built_in">return</span> gulp.src(<span class="string">'src/js/*.js'</span>) //可配置你需要检查脚本的具体名字。</span><br><span class="line">        //js代码校验</span><br><span class="line">        .pipe(jshint())</span><br><span class="line">        .pipe(jshint.reporter(<span class="string">'default'</span>))</span><br><span class="line">        //js代码合并</span><br><span class="line">        .pipe(concat(<span class="string">'all.js'</span>))</span><br><span class="line">        //压缩脚本文件</span><br><span class="line">        .pipe(uglify())</span><br><span class="line">        //给文件添加.min后缀</span><br><span class="line">        .pipe(rename(&#123; suffix: <span class="string">'.min'</span> &#125;))</span><br><span class="line">        //压缩脚本文件</span><br><span class="line">        .pipe(uglify())</span><br><span class="line">        //输出压缩文件到指定目录</span><br><span class="line">        .pipe(gulp.dest(<span class="string">'dist/js'</span>))</span><br><span class="line">    //提醒任务完成</span><br><span class="line">    .pipe(notify(&#123; message: <span class="string">'Scripts task complete'</span> &#125;))</span><br><span class="line">    console.log(<span class="string">'gulp task is done'</span>); //自定义提醒信息</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">//clean 清除文件 在任务执行前，最好先清除之前生成的文件</span><br><span class="line">gulp.task(<span class="string">'clean'</span>, <span class="keyword">function</span>(cb) &#123;</span><br><span class="line">    <span class="built_in">return</span> del([<span class="string">'dist/css'</span>, <span class="string">'dist/js'</span>, <span class="string">'dist/img'</span>], cb)</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">//监听 Watch</span><br><span class="line">gulp.task(<span class="string">'testWatch'</span>, <span class="function"><span class="title">function</span></span>() &#123;</span><br><span class="line">    // Watch .less files</span><br><span class="line">    gulp.watch(<span class="string">'src/**/*.less'</span>, [<span class="string">'testLess'</span>]); //当所有less文件发生改变时，调用<span class="built_in">test</span>Less任务</span><br><span class="line">    // Watch image files</span><br><span class="line">    gulp.watch(<span class="string">'src/**/*.img'</span>, [<span class="string">'testImagemin'</span>]);</span><br><span class="line">    // Watch .js files</span><br><span class="line">    gulp.watch(<span class="string">'js/*.js'</span>, [<span class="string">'scripts'</span>]);</span><br><span class="line">    // Create LiveReload server</span><br><span class="line">   livereload.listen();</span><br><span class="line">   // Watch any files <span class="keyword">in</span> assets/, reload on change</span><br><span class="line">   gulp.watch([<span class="string">'dist/**'</span>]).on(<span class="string">'change'</span>, livereload.changed);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h2 id="u8FD0_u884C"><a href="#u8FD0_u884C" class="headerlink" title="运行"></a>运行</h2><p>可以运行单独的任务，例如</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">gulp default</span><br><span class="line">gulp watch</span><br><span class="line">gulp clean</span><br></pre></td></tr></table></figure>
<p>也可以运行整个任务<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gulp</span><br></pre></td></tr></table></figure></p>
<h2 id="u603B_u7ED3"><a href="#u603B_u7ED3" class="headerlink" title="总结"></a>总结</h2><p>1.安装Node<br>2.安装gulp<br>3.新建gulpfile.js文件<br>4.运行</p>
<p>参考文献：<br>1.<a href="http://wjkang.github.io/2016/05/02/Gulp/#前端自动化的目的" target="_blank" rel="external">前端自动化的目的</a><br>2.<a href="https://github.com/gulpjs/gulp/blob/master/docs/API.md" target="_blank" rel="external">gulp API</a><br>3.<a href="http://www.ydcss.com/archives/41" target="_blank" rel="external">gulp教程之gulp-minify-css</a><br>4.<a href="http://www.tuicool.com/articles/2qeuAbi" target="_blank" rel="external">gulp-notify处理报错</a><br>5.<a href="http://www.ydcss.com/archives/26" target="_blank" rel="external">gulp教程之gulp-imagemin</a><br>6.<a href="http://www.tuicool.com/articles/fUjMRn" target="_blank" rel="external">使用BrowserSync浏览及相关配置</a><br>7.<a href="/">gulp入门教程</a></p>

      
    </div>
    
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/gulp/">gulp</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/学习笔记/">学习笔记</a></li></ul>
	</div>

      
	<div class="article-category tagcloud">
	<a class="article-category-link" href="/categories/学习笔记/">学习笔记</a>
	</div>


      
      <div class="clearfix"></div>
    </div>
    
  </div>
  
</article>









  
    <article id="post-for循环的执行顺序" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2016/02/02/for循环的执行顺序/" class="article-date">
  	<time datetime="2016-02-02T07:38:29.000Z" itemprop="datePublished">2016-02-02</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2016/02/02/for循环的执行顺序/">for循环的执行顺序</a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>for循环的执行顺序用如下表达式：</p>
<pre><code class="JavaScript"><span class="keyword">for</span>(expression1;expression2;expression3)
{   
          expression4;
}
</code></pre>
<pre><code>执行的顺序应该是：
</code></pre><h2 id="1_uFF09_u7B2C_u4E00_u6B21_u5FAA_u73AF_uFF0C_u5373_u521D_u59CB_u5316_u5FAA_u73AF_u3002"><a href="#1_uFF09_u7B2C_u4E00_u6B21_u5FAA_u73AF_uFF0C_u5373_u521D_u59CB_u5316_u5FAA_u73AF_u3002" class="headerlink" title="1）第一次循环，即初始化循环。"></a>1）第一次循环，即初始化循环。</h2><pre><code>首先执行表达式expression1（一般为初始化语句）；再执行expression2（一般为条件判断语句），判断expression1是否符合expression2的条件；如果符合，则执行expression4，否则，停止执行；最后执行expression3。
</code></pre><h2 id="2_uFF09_u7B2CN_uFF08N_26gt_3B_3D2_uFF09_u6B21_u5FAA_u73AF"><a href="#2_uFF09_u7B2CN_uFF08N_26gt_3B_3D2_uFF09_u6B21_u5FAA_u73AF" class="headerlink" title="2）第N（N&gt;=2）次循环"></a>2）第N（N&gt;=2）次循环</h2><pre><code>首先执行expression2，判断在expression3是否符合在expression2要求；如果符合，则继续执行在expression4，否则，停止执行。最后执行在expression3。如此往复，直至expression3不满足在expression2条件是为止。
</code></pre><h2 id="u603B_u7ED3_uFF1A"><a href="#u603B_u7ED3_uFF1A" class="headerlink" title="总结："></a>总结：</h2><pre><code>总的来说，执行的顺序是一致的。先条件判断（expression2），再函数体执行（expression4），最后for执行（expression3）。往复......区别在于，条件判断的对象。第一次判断时，对象为初始化语句（expression1），后续的判断对象为执行后的结果（expression3）。
</code></pre>
      
    </div>
    
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/随笔/">随笔</a></li></ul>
	</div>

      
	<div class="article-category tagcloud">
	<a class="article-category-link" href="/categories/知识点滴/">知识点滴</a>
	</div>


      
      <div class="clearfix"></div>
    </div>
    
  </div>
  
</article>









  
    <article id="post-Javascript-严格模式" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2016/02/01/Javascript-严格模式/" class="article-date">
  	<time datetime="2016-02-01T03:08:22.000Z" itemprop="datePublished">2016-02-01</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2016/02/01/Javascript-严格模式/">Javascript 严格模式</a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>除了正常运行模式，ECMAscript 5添加了第二种运行模式：”<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">严格模式</a>“（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。</p>
<h2 id="u8BBE_u7ACB_u201D_u4E25_u683C_u6A21_u5F0F_u201D_u7684_u76EE_u7684_3A"><a href="#u8BBE_u7ACB_u201D_u4E25_u683C_u6A21_u5F0F_u201D_u7684_u76EE_u7684_3A" class="headerlink" title="设立”严格模式”的目的:"></a>设立”严格模式”的目的:</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;</span><br><span class="line">　　- 消除代码运行的一些不安全之处，保证代码运行的安全；</span><br><span class="line">　　- 提高编译器效率，增加运行速度；</span><br><span class="line">　　- 为未来新版本的Javascript做好铺垫。</span><br></pre></td></tr></table></figure>
      
    </div>
    
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/javascript/">javascript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/学习笔记/">学习笔记</a></li></ul>
	</div>

      
	<div class="article-category tagcloud">
	<a class="article-category-link" href="/categories/学习笔记/">学习笔记</a>
	</div>


      
        <p class="article-more-link">
          <a  href="/2016/02/01/Javascript-严格模式/#more">more >></a>
        </p>
      
      <div class="clearfix"></div>
    </div>
    
  </div>
  
</article>









  
    <article id="post-关于haslayout" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2016/01/26/关于haslayout/" class="article-date">
  	<time datetime="2016-01-26T02:58:48.000Z" itemprop="datePublished">2016-01-26</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2016/01/26/关于haslayout/">关于IE的下的haslayout问题</a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>今天早上我们一个前端同事GQL遇到一个问题。在IE7下position:relative层在动态渲染时出现偏移.<br>跟下面这个demo情景相似</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="doctype">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</span><br><span class="line"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="title">html</span> <span class="attribute">xmlns</span>=<span class="value">"http://www.w3.org/1999/xhtml"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="title">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="title">title</span>&gt;</span>IE7 absolute positioning bug<span class="tag">&lt;/<span class="title">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="title">style</span> <span class="attribute">type</span>=<span class="value">"text/css"</span>&gt;</span><span class="css"></span><br><span class="line">      <span class="id">#panel</span> <span class="rules">&#123; <span class="rule"><span class="attribute">position</span>:<span class="value"> relative</span></span>; <span class="rule"><span class="attribute">border</span>:<span class="value"> solid <span class="number">1px</span> black</span></span>; &#125;</span></span><br><span class="line">      <span class="id">#spacer</span> <span class="rules">&#123; <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">100px</span></span></span>; &#125;</span></span><br><span class="line">      <span class="id">#footer</span> <span class="rules">&#123; <span class="rule"><span class="attribute">position</span>:<span class="value"> absolute</span></span>; <span class="rule"><span class="attribute">bottom</span>:<span class="value"> <span class="number">0px</span></span></span>; &#125;</span></span><br><span class="line">    </span><span class="tag">&lt;/<span class="title">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span>&gt;</span><span class="javascript"></span><br><span class="line">      <span class="function"><span class="keyword">function</span> <span class="title">toggle</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> spacer = <span class="built_in">document</span>.getElementById(<span class="string">"spacer"</span>);</span><br><span class="line">        <span class="keyword">var</span> style = <span class="string">"block"</span>;</span><br><span class="line">        <span class="keyword">if</span> (spacer.style.display == <span class="string">"block"</span> || spacer.style.display == <span class="string">""</span>) &#123;</span><br><span class="line">          style = <span class="string">"none"</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        spacer.style.display = style;</span><br><span class="line">      &#125;</span><br><span class="line">    </span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="title">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="title">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"panel"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="title">button</span> <span class="attribute">onclick</span>=<span class="value">"toggle();"</span>&gt;</span>Click me<span class="tag">&lt;/<span class="title">button</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="title">br</span> /&gt;</span><span class="tag">&lt;<span class="title">br</span> /&gt;</span><span class="tag">&lt;<span class="title">br</span> /&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"spacer"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"footer"</span>&gt;</span>This is some footer<span class="tag">&lt;/<span class="title">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="title">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="title">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="title">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>在IE7中，点击”Click me”，“This is some footer”没有随着边框向上走。在IE8/9/10/11，firefox里面都是正常。</p>
<p>二、原因分析<br>1 #panel没有布局，因此当#panel重新布局的时候，IE7没有重画#panel的孩子。<br>2 position:relative没有触发IE的hasLayout属性。只有当元素的hasLayout属性被设为了true，才能对自己和子孙元素进行尺寸计算和定位。<br>3 overflow:hidden和float:left和zoom:1都能触发hasLayout属性。<br>
      
    </div>
    
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/学习笔记/">学习笔记</a></li></ul>
	</div>

      
	<div class="article-category tagcloud">
	<a class="article-category-link" href="/categories/学习笔记/">学习笔记</a>
	</div>


      
        <p class="article-more-link">
          <a  href="/2016/01/26/关于haslayout/#more">more >></a>
        </p>
      
      <div class="clearfix"></div>
    </div>
    
  </div>
  
</article>









  
    <article id="post-关于面试" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2016/01/25/关于面试/" class="article-date">
  	<time datetime="2016-01-25T15:32:50.000Z" itemprop="datePublished">2016-01-25</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2016/01/25/关于面试/">关于面试</a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>今天天小组会的时候组长wh模拟了一次面试。面试对象是猴哥，但问题几乎虐翻全场。<br>这两年也经过的一些面试，总结感受。我觉得面试有三个要点，一看真实实力，二看运气，三看面试你的人。对whao这种技术狂人来说，面试是一个互劈的过程。当然我是面试官可能也不太会以自己软肋接别人硬拳头。所以通过他进入平安的人都是js逼，绝逼不可能有css逼。我看得出他十分享受别人被他问的一愣一愣又一脸崇拜的样子。他问猴哥的问题我印象里在去年他做过一次分享会。既是能拿出手的一定是他强项。当然，这不代表他其他方面就弱。所以记住一点，面试官问的问题一般都是有备而来，胸有成竹的。所以不会就谦虚点坦言自己不会，千万别不会还一本正经的胡说八道。技不如人不丢人，通过后天学习可以弥补。但不会做人就是品质问题了。会做事是(IQ)而处理事的态度是(EQ)。我觉得实际工作中情商比智商更重要。</p>
<p>当然如果你足够有聪慧又健谈，也可以争得主动权引导着面试官跟着你的思路走。多聊你自己擅长的东西，但前提得是你这方面真的牛逼，否则不要轻易撕逼，否则撕完你就成傻逼。前端是一个知识很广泛的圈。只要不是到了专家的变态级别应该不会有人真的各个方面都无懈可击。<br>一般来说去面试跟你聊生活的是行政人事，聊技术的是同事或Leader， 聊情怀和理想的是老板。其他俩个随便扯扯淡即可，聊技术的，决定了你今后跟什么样的人和团队共事。 从面试官的身上可以直接反映这个前端团队的技术层次和应征单位前端职位的受重视程度。这是一个互相试水的过程。所以一定要诚实对待，假如你跟面你的人话不投机就别妄想了。就算你趋炎附势混进去，终有一天也会因各种水土不服滚出来。我常说面试跟相亲一样，虽然我没相过亲，但没吃过猪肉也看过猪跑。面试二字，面首先是眼缘，第一印象，话语是否投机，沟通是否顺畅，其次是试。这试具体前面已经说过，不再赘述。有机会还是多去知名的大公司去。我不是对小公司有偏见，也不否认小公司也有强人，而是概率问题，就像我相信“鸡窝里也能飞出金凤凰”，但毕竟少数个例，总能看见鸡窝里飞出凤凰的概率还是极低的。<br>附几个较新的前端面试题链接。平时可以自己做一下。心里有个底，不足则加勉。<br>来源阿里的寒冬witer老师(github:@wintercn)<br><a href="https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md?from=timeline&amp;isappinstalled=0" target="_blank" rel="external">前端开发面试题</a><br>来源凯歌博客<a href="https://github.com/jsonxu/F2E-Blog/blob/master/2015%E9%9D%A2%E8%AF%95%E9%A2%98%E5%8F%82%E8%80%83%E7%AD%94%E6%A1%88.md" target="_blank" rel="external">前端开发面试题</a><br><a href="https://github.com/hawx1993/Front-end-Interview-questions" target="_blank" rel="external">前端开发面试问题及答案整理1</a><br><a href="https://github.com/AutumnsWind/Front-end-questions-to-the-interview-stage" target="_blank" rel="external">前端开发面试问题及答案整理2</a><br><a href="https://github.com/paddingme/Front-end-Web-Development-Interview-Question" target="_blank" rel="external">前端开发面试问题及答案整理3</a><br><a href="https://github.com/qiu-deqing/FE-interview" target="_blank" rel="external">前端开发面试问题及答案整理4</a><br>说完面试，再聊聊最近学习上的一些感悟。进入平安金科也有1年半。各个小组也都共事过一圈。从一账通到官网到旗舰店，平安金融卫士，到现在的移动端。每个小组和组长都有自己的特点，优势和不足。这一年收获很大。美国有句谚语“学会游泳的最好办法 就是把鸭子扔进河里”想学到东西方法很多，最有用的途径绝不是照本宣科，而是投在实际项目中不断的打怪升级。不要畏惧辛苦，手里有项目做，并且是有价值的项目是一件极好的事。<br>人无论水平高还是低，在自学的过程中都会有自己的瓶颈和盲点。有时我们或许很用心认真的按自己的逻辑完成一个demo，你觉得你已经倾其所能把它做到极致了。OK你觉得很完美。其实远远不够，多看别人的代码，会从中获取新的能量。我有时常看zf的代码会发现他做了跟我同样的东西，却用了不同的办法。然后思考他为什么这么做？好处是什么？思考之后，去其糟粕，取其精华，再回头把自己原来的代码进一步优化。可能忽然一下如醍醐灌顶。 </p>
<p>古话说“他山之石，可以功玉” 可能你开始只会把别人的代码拷过来，后来渐渐会改一点。一点点从借用到巧用，但只要足够坚持，天道酬勤总有一天你会写出自己的东西。<br>我很喜欢图灵的书，觉的几乎每本都是精华，但每本图灵的书封总有那句话“站在巨人的肩膀上”!<br> 我觉得不管用什么方式，只要不涉及版权和盈利目地，在合理范围内以正常途径的抄写，借鉴，引用……只要可以从中吸收营养，推进自己进步都不失为一种好的学习途径。</p>

      
    </div>
    
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前题面试题/">前题面试题</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/随笔/">随笔</a></li></ul>
	</div>

      

      
      <div class="clearfix"></div>
    </div>
    
  </div>
  
</article>









  
    <article id="post-Mac-OS-x-使用技巧" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2016/01/20/Mac-OS-x-使用技巧/" class="article-date">
  	<time datetime="2016-01-20T07:17:54.000Z" itemprop="datePublished">2016-01-20</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2016/01/20/Mac-OS-x-使用技巧/">Mac OS x 使用技巧</a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>先附一张mac常用快捷键<br><img src="/img/mac.jpg" alt=""></p>
<h1 id="u5E38_u7528_u9AD8_u9891_u7684_u5FEB_u6377_u952E_u76EE_u5F55_uFF1A"><a href="#u5E38_u7528_u9AD8_u9891_u7684_u5FEB_u6377_u952E_u76EE_u5F55_uFF1A" class="headerlink" title="常用高频的快捷键目录："></a>常用高频的快捷键目录：</h1>
      
    </div>
    
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/mac技巧/">mac技巧</a></li></ul>
	</div>

      
	<div class="article-category tagcloud">
	<a class="article-category-link" href="/categories/技术摘录/">技术摘录</a>
	</div>


      
        <p class="article-more-link">
          <a  href="/2016/01/20/Mac-OS-x-使用技巧/#more">more >></a>
        </p>
      
      <div class="clearfix"></div>
    </div>
    
  </div>
  
</article>









  
    <article id="post-重新开博－hexo建站笔记" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2016/01/20/重新开博－hexo建站笔记/" class="article-date">
  	<time datetime="2016-01-20T01:51:37.000Z" itemprop="datePublished">2016-01-20</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2016/01/20/重新开博－hexo建站笔记/">重新开博－hexo建站笔记</a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>这两天重新搭了hexo博客.过程中一直不停的踩坑踩到脚软。一年前我搭过一个hexo博客。<br>由于博客的域名前缀必须跟github账号名一至。介于以前的github用户名有点土，不符合我的个人风格，<br>于是为了更土一点就重新注了个github账号。好了,开始入坑：<br>
      
    </div>
    
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/hexo/">hexo</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/随笔/">随笔</a></li></ul>
	</div>

      
	<div class="article-category tagcloud">
	<a class="article-category-link" href="/categories/学习笔记/">学习笔记</a>
	</div>


      
        <p class="article-more-link">
          <a  href="/2016/01/20/重新开博－hexo建站笔记/#more">more >></a>
        </p>
      
      <div class="clearfix"></div>
    </div>
    
  </div>
  
</article>









  
    <article id="post-VIM学习笔记" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2016/01/19/VIM学习笔记/" class="article-date">
  	<time datetime="2016-01-19T09:17:27.000Z" itemprop="datePublished">2016-01-19</time>
</a>
    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2016/01/19/VIM学习笔记/">VIM学习笔记</a>
    </h1>
  

      </header>
      
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>首先我们知道在命令行中输入vim,进入vim文编辑器。<br>可能有人会问vim是什么？vim是多模式文本编辑器也可以说是跨平台的文本编辑器，什么平台都可以用，windows，linux，unix，etc.<br>由vi更新而来 VIM 是vi 的加强版.不仅兼容vi的所有指令，而且还有一些新的特性在里面。<br>安装vim之后会有个vimrc文件，像高亮、字体等等所有的设置都可以写在里面的，感兴趣可以去网上找找vim配置文件.<br>先介绍一些非常基础的vim知识供学习参考。</p>
<p>vim有三种工作模式：插入模式 (Insert mode)、命令模式(Command mode) 、行模式 (EX Commands mode)。<br>插入模式就像我们平时使用记事本时一样，可以随意的输入文本，<br>基本没有什么可说的。主要是其它两个模式.首先了解下三个模式的相互转换：<br>
      
    </div>
    
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vim/">vim</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/学习笔记/">学习笔记</a></li></ul>
	</div>

      
	<div class="article-category tagcloud">
	<a class="article-category-link" href="/categories/技术摘录/">技术摘录</a>
	</div>


      
        <p class="article-more-link">
          <a  href="/2016/01/19/VIM学习笔记/#more">more >></a>
        </p>
      
      <div class="clearfix"></div>
    </div>
    
  </div>
  
</article>









  
  
    <nav id="page-nav">
      <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="extend next" rel="next" href="/page/2/">Next &raquo;</a>
    </nav>
  
</div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info">
    	<div class="footer-left">
    		&copy; 2016 林姐姐
    	</div>
      	<div class="footer-right">
      		<a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
      	</div>
    </div>
  </div>
</footer>
    </div>
    
  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css">


<script>
	var yiliaConfig = {
		fancybox: true,
		mathjax: true,
		animate: true,
		isHome: true,
		isPost: false,
		isArchive: false,
		isTag: false,
		isCategory: false,
		open_in_new: false
	}
</script>
<script src="http://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/js/main.js" type="text/javascript"></script>






<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    }
});

MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';                 
    }       
});
</script>

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>


  </div>
</body>
</html>